<template>
  <div class="moreList" @scroll.prevent="onScroll">
    <a class="on" href="javascript:void(0);" @click="clickShow" v-if="!headerShow"><i class="iconfont icon-fenlei"></i></a>
    <div class="moreListClassfiy" v-if="headerShow">
      <a @click="listClick(1)">
        <img src="http://www.xiaosaonian.cn/img/5a2763b8c1ef4.png" alt="">
        <span>叶彩类</span>
      </a>
      <a @click="listClick(2)">
        <img src="http://www.xiaosaonian.cn/img/5a2763b8c1ef4.png" alt="">
        <span>茄果/瓜果</span>
      </a>
      <a @click="listClick(3)">
        <img src="http://www.xiaosaonian.cn/img/5a2763b8c1ef4.png" alt="">
        <span>花菜/豆类</span>
      </a>
      <a @click="listClick(4)">
        <img src="http://www.xiaosaonian.cn/img/5a2763b8c1ef4.png" alt="">
        <span>葱蒜类</span>
      </a>
    </div>
    <div class="moreNav">
      <div class="navNew">
        <a href="JavaScript:void(0);">最新</a>
      </div>
      <div class="navNew">
        <a href="JavaScript:void(0);">销量</a>
      </div>
      <div class="navNew">
        <a href="JavaScript:void(0);">价格</a>
      </div>
      <div class="navNew">
        <a href="JavaScript:void(0);">筛选</a>
      </div>
    </div>
    <div class="moreExampleAll">
      <div class="list" v-for="(items, index) in moreList2" :key="index">
        <div class="listImg">
          <a href="javascript:void(0);">
            <img :src="items.imgUrl" alt>
          </a>
          <h3>{{items.title}}</h3>
          <p class="details">农家种植，生长周期长</p>
          <div class="listBottom">
            <div class="lb_left">
              <p>500ml*2</p>
              <span>￥23</span>
            </div>
            <i class="iconfont icon-huoche"></i>
          </div>
        </div>
      </div>
    </div>
    <Nav></Nav>
  </div>
</template>

<script>
import Nav from '../nav/nav'
export default {
  name: 'MoreList',
  components: {
    Nav
  },
  data () {
    return {
      headerShow: true,
      moreList2: []
    }
  },
  mounted (e) {
    this.getDataList()
    window.addEventListener('scroll', this.onScroll, true)
  },
  methods: {
    onScroll: function (e) {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 208) {
        this.headerShow = false
      }
    },
    listClick: function (e) {
      this.$router.push({
        path: '/more',
        query: {
          listId: e
        }
      })
      var arr = JSON.parse(localStorage.getItem('optimizationList'))
      var listId = Number(this.$route.query.listId)
      for (var i = 0; i < arr.length; i++) {
        // console.log(Number(arr[i].id),listId)
        if (Number(arr[i].id) === listId) {
          this.moreList2 = arr[i].swiperList
        }
      }
    },
    clickShow: function () {
      this.headerShow = true
      window.pageYOffset = document.documentElement.scrollTop = document.body.scrollTop = 0
    },
    getDataList: function () {
      var arr = JSON.parse(localStorage.getItem('optimizationList'))

      var listId = Number(this.$route.query.listId)
      for (var i = 0; i < arr.length; i++) {
        // console.log(Number(arr[i].id),listId)
        if (Number(arr[i].id) === listId) {
          this.moreList2 = arr[i].swiperList
        }
      }
      console.log(this.moreList2)
    }
  }
}

</script>

<style scope>
  .moreList {
    width: 100%;
    background-color: #f6f6f6;
  }

  .moreList .on {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 10;
    background-color: rgba(0, 0, 0, .5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .moreList .on i {
    display: block;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }

  .moreListClassfiy {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: .2rem
  }

  .moreListClassfiy a {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    border: 1px solid #e1e3e2;
    width: 3.26rem;
    height: .75rem;
    margin-top: 0.2rem;
    margin-left: .3rem;
  }

  .moreListClassfiy a img {
    width: .44rem;
    height: .44rem;
    display: block;
    margin: 0 .4rem;
  }

  .moreListClassfiy a span {
    font-size: .28rem;
  }

  .moreNav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 .32rem;
  }

  .moreNav .navNew {
    display: block;
    text-align: center;
    border-right: 1px solid #BFBFBF;
    width: 25%;
    margin: .2rem 0;
  }

  .moreNav .navNew:last-of-type {
    border: none;
  }

  .moreNav .navNew a {
    font-size: .28rem;
    color: #303030;
    display: block;
  }

  .moreExampleAll {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .moreExampleAll .list,
  .moreExampleAll .list .listImg {
    width: 3.3rem;
  }

  .moreExampleAll .list {
    margin-left: .3rem
  }

  .moreExampleAll .list .listImg img {
    width: 3.3rem;
    height: 3.3rem;
  }

  .moreExampleAll .list .listImg h3 {}

</style>
